<template>
    <div>
        <el-card shadow="never">
            <template #header>
                <div>
                    增加
                </div>
            </template>
            <div style="width:800px">
                <vxe-form v-model:collapseStatus="collapseStatus" ref="formRef" :data="formData" :rules="formRules"
                    title-align="right" title-width="100" title-colon @reset="resetEvent" @submit="submitEvent">
                    <vxe-form-item title="标题" field="title" :item-render="{}" span="24">
                        <template #default="{ data }">
                            <vxe-input v-model="data.title" type="text" clearable></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="关键字" field="keywords" :item-render="{}" span="24">
                        <template #default="{ data }">
                            <vxe-input v-model="data.keywords" type="text" clearable></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="描述" field="description" :item-render="{}" span="24">
                        <template #default="{ data }">
                            <vxe-textarea v-model="data.description" placeholder="请输入描述"
                                :autosize="{ minRows: 6, maxRows: 10 }" clearable></vxe-textarea>
                        </template>
                    </vxe-form-item>

                    <vxe-form-item span="24">
                        <template #default>
                            <vxe-button type="submit" status="primary" content="提交"></vxe-button>
                            <vxe-button type="reset" content="重置"></vxe-button>
                        </template>
                    </vxe-form-item>
                </vxe-form>
            </div>

            <!-- 弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="编辑" align-center @close="close">
                <vxe-form :data="editFormData" :rules="formRules" title-align="right" title-width="100"
                    @submit="submitEvent" title-colon custom-layout>
                    <vxe-form-item title="标题" field="title" :item-render="{}" span="24">
                        <template #default="{ data }">
                            <vxe-input v-model="data.title" type="text" clearable></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="关键字" field="keywords" :item-render="{}" span="24">
                        <template #default="{ data }">
                            <vxe-input v-model="data.keywords" type="text" clearable></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="描述" field="description" :item-render="{}" span="24">
                        <template #default="{ data }">
                            <vxe-textarea v-model="data.description" placeholder="请输入描述"
                                :autosize="{ minRows: 6, maxRows: 10 }" clearable></vxe-textarea>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item span="24">
                        <template #default>
                            <vxe-button type="submit" status="primary" content="提交"></vxe-button>
                            <vxe-button type="reset" content="重置"></vxe-button>
                        </template>
                    </vxe-form-item>
                </vxe-form>
            </el-dialog>
        </el-card>
        <el-card shadow="never">
            <vxe-grid ref='xGrid' v-bind="gridOptions" v-on="gridEvent">
                <template #discountTypeSlot="{ row }">
                    <div v-if="row.type === 'mj'">
                        满减
                    </div>
                    <div v-else>
                        折扣
                    </div>
                </template>
                <template #action="{ row }">
                    <el-button type="primary" @click="edit(row)">编辑</el-button>
                    <el-button type="danger" @click="del(row)">删除</el-button>
                </template>
            </vxe-grid>
        </el-card>
    </div>
</template>

<script setup lang="ts">
const { gridOptions } = useCategory();
const gridEvent: VxeGridListeners<RowVO> = {
    proxyQuery() {
        console.log('数据代理查询事件')
    },
    proxyDelete() {
        console.log('数据代理删除事件')
    },
    proxySave() {
        console.log('数据代理保存事件')
    }
}



import { VXETable, VxeFormPropTypes, VxeFormEvents } from 'vxe-table'
import { http } from '@/plugins/axios'
interface FormDataVO {
    id?: number
    title: string
    keywords: string
    description: string
}
const formRef = ref()
const collapseStatus = ref(true)

const formData = reactive<FormDataVO>({
    id: 0,
    title: "",
    keywords: "",
    description: "",
})

const dialogFormVisible = ref(false)
const editFormData = reactive<FormDataVO>({
    id: 0,
    title: "",
    keywords: "",
    description: "",
})
//编辑
const edit = (row: RowVO) => {
    dialogFormVisible.value = true
    editFormData.id = row.id
    editFormData.title = row.title
    editFormData.keywords = row.keywords
    editFormData.description = row.description
}

// close
const close = () => {
    dialogFormVisible.value = false
    editFormData.id = 0
    editFormData.title = ""
    editFormData.keywords = ""
    editFormData.description = ""
}
// 删除
const del = async (row: RowVO) => {
    await http.request({
        url: `/category/${row.id}`,
        method: "DELETE",
    })
}

const xGrid = ref()
const reload = () => {
    xGrid.value.commitProxy("reload")
}
const formRules = reactive<VxeFormPropTypes.Rules>({
    title: [
        { required: true, message: '请输入内容' }
    ],
    keywords: [
        { required: true, message: '请请输入内容' }
    ],
})

const submitEvent: VxeFormEvents.Submit = async () => {
    if (editFormData.id == 0) {
        await http.request({
            url: `/category`,
            method: "POST",
            data: formData
        })
        //清空表单
        formRef.value.reset()
        await reload()
    } else {
        await http.request({
            url: `/category/${editFormData.id}`,
            method: "PUT",
            data: editFormData
        })
        formRef.value.reset()
        await reload()
    }
}

const resetEvent: VxeFormEvents.Reset = () => {
    console.log('重置事件')
}


</script>

<style scoped></style>